<template>
    <div>
        <!-- 播放器 -->
        <audio
            autoplay
            id="audio"
            preload="auto"
            :src="audioUrl2"
            @play="onPlay"
            @ended="onEnded"
            @pause="onPause">
        </audio>
        <div class="comment" v-for="(item,key) in formData" :key="key">
            <!-- top -->
            <div class="top flex flex-y flex-between">
                <div class="flex flex-y">
                    <!-- 头像 -->
                    <div class="profile">
                        <img :src="item.headImg?item.headImg:common.defaultImg">
                    </div>
                    <!-- 名字 -->
                    <p class="name">{{item.realName}}</p>
                    <p class="none date">{{common.filter_date(item.reviewDate)}}</p>
                </div>
                <div class="none flex flex-y zan">
                    <img src="@/assets/images/public/icon_zan.png">
                    {{item.approvalCount}}
                </div>
            </div>
            <!-- 语音 -->
            <div class="content player" v-if="item.voiceUrl">
                <div class="voice" @click="play(item.voiceUrl,key)" :class="{'play':!item.click,'pause':item.click}">
                    <span>语音播放</span>
                    <img src="@/assets/images/voice/pause.png" v-show="item.click">
                    <img src="@/assets/images/voice/play.png" v-show="!item.click">
                </div>
            </div>
            <!-- 内容 -->
            <div class="content" v-else>
                {{item.content}}
            </div>
            <!-- 查看更多 -->
            <div @click="load_reply(item.contentUid,item.replyCount),item.show = !item.show">
                <el-button type="text">
                    回复 {{item.replyCount}}
                    <i class="el-icon-arrow-up" v-if="item.show"></i>
                    <i class="el-icon-arrow-down" v-else></i>
                </el-button>
            </div>
            <!-- 2级评论列表（没有语音） -->
            <div class="child" v-if="replyData.length>0 && item.show">
                <reply
                    v-for="(data,key) in replyData"
                    :formData="data"
                    :key="key"
                    :border="key == replyData.length-1?false:true">
                </reply>
                <!-- 分页 -->
                <page :total="pageTotal" @change="changePage" nosize="true"></page>
            </div>
        </div>
    </div>
</template>

<script>
import reply from './reply.vue'
import page from '@/components/public/Pagination'
export default {
    props:["formData"],
    components:{
        reply,
        page
    },
    watch:{
        formData(val){
            console.log(val);
        }
    },
    data () {
        return {
            replyData:[],
            pageNum:1,
            pageSize:20,
            pageTotal:0,
            currentId:"",
            //语音
            playStatus:false,  //播放状态，true正在播放，false暂停/停止
            audioUrl2:"",
            flag:"",
        }
    },
    methods:{
        //加载子回复
        load_reply:function(id,count){
            //有回复才加载
            if(count){
                if(id){
                    this.currentId = id;
                }
                HTTP('comment_income2', {
                    contentUid:this.currentId,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize
                })
                .then(res=>{
                    if(res.code == 200){
                        this.replyData = res.data.list;
                        this.pageTotal = res.data.total;
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            }
        },
        //改变分页
        changePage:function(obj){
            this.pageSize = obj.pageSize;
            this.pageNum = obj.pageNum;
            this.load_reply();
        },
        //语音点击事件
        play:function(url,n){
           var oAudio = document.getElementById('audio');
           this.flag = n;
           //新目标，播放
           if(this.audioUrl2 != url){
               console.log('新目标');
               //有播放的，让它暂停
               if(this.playStatus){
                   console.log("有播放的，让它暂停");
                   this.playStatus = false;
                   oAudio.pause();
               }
               else{
                   this.audioUrl2 = url;
                   this.wave(true);
                   oAudio.play();
               }
           }
           //老目标，停止
           else{
               //如果正在播放中，让它停止
               if(this.playStatus){
                   console.log('如果正在播放中，让它停止');
                   this.playStatus = false;
                   oAudio.pause();
                   this.audioUrl2 = "";
                   this.wave(false); //关闭波纹
               }
               //如果已经暂停/停止，让它播放
               else{
                   console.log('如果已经暂停/停止，让它播放');
                   this.playStatus = true;
                   this.audioUrl2 = url;
                   oAudio.play();
                   this.wave(true); //开启波纹
               }
           }
       },
       //开启/结束波纹
       wave:function(bol){
           //先关闭所有波纹
           if(bol){
               this.formData.map(o=>{
                   if(o.click){
                       o.click = false;
                   }
               })
           }
           //开启/关闭
           this.formData[this.flag].click = bol;
       },
       //开始播放
       onPlay:function(res){
           this.playStatus = true;
           this.wave(true); //开启波纹
       },
       //播放结束
       onEnded:function(res){
           this.playStatus = false;
           this.wave(false); //关闭波纹
       },
       //暂停播放
       onPause:function(res){
           console.log('已停止');
           this.playStatus = false;
           this.wave(false); //关闭波纹
       },
    }
}
</script>

<style lang="scss" scoped>
    .comment{
        padding: 30px 0 15px 0;
        border-bottom: 1px solid #dedede;
        .top{
            padding: 15px 0;
            .profile{
                margin-right: 10px;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    min-height: 30px;
                }
            }
            .name{
                font-size: 16px;
                margin-right: 20px;
            }
            .date{
                margin-top: 4px;
            }
            .zan{
                img{
                    height: 16px;
                    margin-right: 4px;
                }
            }
        }
        .content{
            padding: 15px 0;
            color: #444;
            line-height: 24px;
        }
        .child{
            margin-left: 40px;
        }
    }
    //语音
    .voice{
        display: flex;
        align-items: center;
        width: 100px;
        cursor: pointer;
        img{
            width: 22px;
            margin-left: 6px;
        }
    }
    .play{
        span{
            color: #3399FF;
        }
    }
    .pause{
        span{
            color: #F5A623;
        }
    }
</style>
